<template>
  <!-- 简历管理 -->
  <div class="list">
    <!--简历状态搜索框-->
    <div class="query" style="">
      <el-input
        placeholder="请输入姓名"
        prefix-icon="el-icon-search"
        label-position="left"
        v-model="resumeValue"
      >
      </el-input>
      <el-select v-model="resumeStatus" placeholder="简历状态">
        <el-option
          prefix-icon="el-icon-caret-bottom"
          label-position="right"
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="resumeSearch"
        >搜索</el-button
      >
      <!-- 重置按钮 -->
      <el-button icon="el-icon-refresh-left" @click="reset" class="module"
        >重置</el-button
      >
    </div>
    <div>
      <el-table
        :data="tableData"
        :stripe="true"
        style="width: 100%"
        class="table"
      >
        <el-table-column width="40"></el-table-column>
        <el-table-column prop="realname" label="应聘者信息">
          <template slot-scope="scope">
            <div>
              <span>{{ scope.row.realname }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="educational" label="教育背景"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="expectation" label="求职意向"></el-table-column>
        <el-table-column prop="createtime" label="投递时间">
          <template slot-scope="scope">
            <div>
              {{ scope.row.createtime.split("T")[0] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0">未联系</el-tag>
            <el-tag type="success" v-else>已联系</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operate" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="examine(scope.row, 'edit')"
              >标记</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="handleDeleteUser(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="bottom">
      <div class="paging" style="display: flex; justify-content: space-between">
        <el-pagination
          :current-page="pageInfo.currentPage"
          layout="total"
          :total="total"
        />
        <!-- 页数选择框 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.currentPage"
          :page-size="pageInfo.pageSize"
          layout="prev, pager, next"
          :total="total"
          :hide-on-single-page="true"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  getNoteListApi,
  updateNoteApi,
  deleteNoteApi,
  searchNoteApi,
} from "@/api/notes/notesapi";
export default {
  data() {
    return {
      //用于接收获取的简历列表数据
      tableData: [],
      pageInfo: {
        //当前页数
        currentPage: 1,
        //每页显示的数量
        pageSize: 10,
      },
      total: null,
      form: {
        id: null,
        userName: "",
        userAccount: "",
        password: "",
      },
      //简历姓名输入
      resumeValue: "",
      //简历状态选择
      resumeStatus: null,
      statusOptions: [
        { value: 0, label: "待查看" },
        { value: 1, label: "已查看" },
      ],
    };
  },
  methods: {
    // 获取简历列表数据
    async GetNotesList() {
      let res = await getNoteListApi({
        currentPage: this.pageInfo.currentPage,
        pageSize: this.pageInfo.pageSize,
      });
      if (res.code == 200) {
        this.tableData = res.data.records;
        this.total = res.data.total;
      }
    },
    // 简历搜索
    async resumeSearch() {
      let res = await searchNoteApi({
        currentPage: 1,
        pageSize: 10,
        name: this.resumeValue,
        status: this.resumeStatus,
      });
      if (res.code == 200) {
        this.tableData = res.data.records;
        this.total = res.data.total;
      }
    },
    //重置按钮，清空搜索条件
    reset() {
      this.resumeValue = "";
      this.resumeStatus = null;
      this.GetNotesList();
    },
    // 简历编辑
    async examine(scope, type) {
      console.log("scope", scope);
      let res = await updateNoteApi({
        iid: scope.id,
        status: 1,
      });
      console.log("res", res);
      if (res.code == 200) {
        this.tableData = res.data.records;
        this.total = res.data.total;
        console.log("this.tableData", this.tableData);
        this.GetNotesList();
      }
    },
    // 分页总数
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.handleGetUser();
    },
    //分页当前页
    handleCurrentChange(val) {
      this.pageInfo.currentPage = val;
      this.handleGetUser();
    },
    handleDeleteUser(scope) {
      this.$confirm("此操作将永久删除该条记录，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await deleteNoteApi({ id: scope.id });
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.GetNotesList();
          } else {
            this.$message.error("删除失败,请稍后重试");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.GetNotesList();
  },
};
</script>


<style lang="scss" scoped>
.list {
  margin: 24px 24px 0 24px;
  // 简历状态&搜索框
  .query {
    // 简历搜索框
    .el-input {
      margin: 31px 10px 31px 10px;
      width: 210px;
    }
    // 简历状态框
    .el-select {
      margin: 31px 10px 31px 0px;
    }
    .el-button {
      width: 100px;
      height: 40px;
      margin: 31px 10px 31px 0px;
    }
  }
}
.table {
  margin: 0;
}
// 批量删除/总条目
.batch {
  padding: 16px 0px 16px 0px;
  display: flex;
  justify-content: space-between;
  background-color: white;
  .el-button {
    margin: 0px 0px 0px 56px;
  }
  .el-pagination {
    margin: 0px 16px 0px 0px;
  }
}
</style>